<template>
  <div class="goods-list-container" :style="defaultStyle" :class="isActiveClass">
    <div class="goods-wrapper" :style="contentStyle">
      <div class="goods-header">
        <div :style="flashStyle">{{ contentData.flash_name }}</div>
        <!-- <div :style="moreStyle">{{ contentData.more_text }}</div> -->
        <div class="desc">
          <CountdownTimer :startTime="contentData.startTime" :endTime="contentData.endTime"
            :color="contentData.itemStyle.countDownColor.color" />
        </div>
      </div>

      <div class="goods-item" v-for="item in contentData.default_sub_list" :key="item.id">
        <div class="goods-image">
          <img v-if="item.activityCommodityAoList" :src="item.activityCommodityAoList[0].image" class="thumb" />
          <img v-else :src="item.image" class="thumb" />
        </div>

        <div class="goods-content">
          <div class="title" :style="titleStyle" v-if="contentData.show_item_name !== 0">{{
              item.activityCommodityAoList && item.activityCommodityAoList[0].name || '课程标题'
          }}</div>
          <!-- <div class="desc">
            <CountdownTimer :startTime="contentData.startTime" :endTime="contentData.endTime"
              :color="contentData.itemStyle.countDownColor.color" />
          </div> -->

          <div class="price" :style="priceStyle">
            <div>
              <span class="original-text"><span>¥</span>{{ item.activityPrice }}</span>
              <del class="discount-text"><span>¥</span>{{ item.originalPrice }}</del>
            </div>
            <!-- <span class="receive" v-if="contentData.activityStatus === 1"
              :style="{ backgroundColor: contentData.itemStyle?.price?.color }">领取</span> -->
            <span class="receive" v-if="contentData.activityStatus === 1"
              :style="{ backgroundColor: contentData.itemStyle?.price?.color }">立即报名</span>
            <span class="expired" v-else>已结束</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CountdownTimer from './CountdownTimer.vue'
import type { CSSProperties } from 'vue'

const props = defineProps({
  contentData: {
    type: Object,
    default() {
      return {}
    }
  },
  isActiveClass: {
    type: String
  }
})

console.log(props.contentData, "props====");


const defaultStyle = computed(() => {
  const s = props.contentData.style
  return {
    paddingTop: s.paddingTop,
    paddingLeft: s.paddingLeft,
    paddingRight: s.paddingRight,
    paddingBottom: s.paddingBottom
  }
})

const contentStyle = computed(() => {
  const s = props.contentData.style
  return {
    borderRadius: s.borderRadius,
    backgroundColor: s.backgroundColor,
    overflow: 'hidden',
    backgroundImage: `url(${props.contentData.activity_bg})`,
    width: '100%',
    backgroundSize: 'contain'
    // backgroundRepeat: 'no-repeat'
  }
})

const flashStyle = computed(() => {
  const s = props.contentData.titleStyle
  return {
    fontSize: s.fontSize + 'px',
    fontWeight: s.fontWeight,
    color: s.color
  }
})

const moreStyle = computed(() => {
  const s = props.contentData.moreStyle
  return {
    fontSize: s.fontSize + 'px',
    color: s.color
  }
})

const priceStyle = computed(() => {
  return {
    color: props.contentData.itemStyle?.price?.color || '#FF3C29'
  }
})

// 标题样式
const titleStyle = computed(() => {
  const t = props.contentData.itemStyle?.title || {}
  const txtEllipsis: CSSProperties = {}
  if (props.contentData.show_item_name == 1) {
    Object.assign(txtEllipsis, {
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
      width: '200px'
    })
  }
  return {
    fontSize: t.fontSize ? `${t.fontSize}px` : '14px',
    color: t.color || '#333333',
    fontWeight: t.fontWeight === 0 ? 'normal' : t.fontWeight,
    ...txtEllipsis
  }
})

// const descStyle = computed(() => {
//   const d = props.contentData.itemStyle?.desc || {}
//   const txtEllipsis: CSSProperties = {}
//
//   if (props.contentData.show_item_desc === 1) {
//     Object.assign(txtEllipsis, {
//       overflow: 'hidden',
//       whiteSpace: 'nowrap',
//       textOverflow: 'ellipsis',
//       width: '200px'
//     })
//   } else if (props.contentData.show_item_desc === 2) {
//     Object.assign(txtEllipsis, {
//       display: '-webkit-box',
//       overflow: 'hidden',
//       WebkitBoxOrient: 'vertical',
//       WebkitLineClamp: 2
//     })
//   }
//
//   return {
//     color: d.color || '#999999',
//     ...txtEllipsis
//   }
// })
</script>

<style scoped lang="scss">
.goods-list-container {
  //padding: 10px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .goods-title {
    font-weight: bold;
    margin-bottom: 10px;
  }

  .goods-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;

    .goods-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .goods-item {
      width: 100%;
      background: #fff;
      overflow: hidden;
      padding: 12px;
      display: flex;
      box-sizing: border-box;
      border-radius: 12px;

      .goods-image {
        position: relative;

        .thumb {
          width: 100px;
          height: 100px;
          border-radius: 8px;
          object-fit: cover;
          display: block;
        }

        .tag-group {
          position: absolute;
          top: 4px;
          left: 4px;
          display: flex;
          flex-direction: column;
          gap: 2px;

          .tag {
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 10px;
            padding: 2px 4px;
            border-radius: 3px;
          }

          .vip {
            background: #e74c3c;
          }
        }
      }

      .goods-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        margin-left: 10px;

        .title {
          font-weight: bold;
          color: #333;
          margin-bottom: 4px;
        }

        .desc {
          font-size: 12px;
          color: #999;
          margin-bottom: 30px;
        }

        .price {
          color: #ff3c29;

          display: flex;
          justify-content: space-between;
          align-items: center;

          .original-text {
            font-size: 16px;
            margin-right: 3px;
            font-weight: bold;

            span {
              font-size: 12px;
            }
          }

          .discount-text {
            color: #949494;
            font-size: 12px;

            span {
              font-size: 12px;
            }
          }

          .receive {
            color: #fff;
            background-color: #ff3c29;
            height: 28px;
            line-height: 28px;
            padding: 0 14px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 24px;
          }

          .expired {
            color: #fff;
            background-color: #cccccc;
            height: 28px;
            line-height: 28px;
            padding: 0 14px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 24px;
          }
        }
      }
    }
  }
}

.active-component {
  border: 1px solid var(--el-color-primary);
}
</style>
